<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录注册</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .container {
      background-color: white;
      padding: 50px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 300px;
      text-align: center;
    }
    .container h2 {
      margin-bottom: 20px;
    }
    .container input {
      width: calc(100% - 22px);
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .container button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      background-color: #ff5000;
      border: none;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }
    .container button:hover {
      background-color: #e04a00;
    }
    .toggle-link {
      color: #ff5000;
      cursor: pointer;
    }
    .radio-group {
      margin: 10px 0;
      text-align: left;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
    .radio-group label {
      margin-right: 10px;
      white-space: nowrap;
    }
    .radio-group input[type="radio"] {
      margin-right: 5px;
    }
  </style>
</head>
<body>
<div class="container" id="login-container">
  <h2>登录</h2>
  <input type="text" placeholder="账号" id="login-account">
  <input type="password" placeholder="密码" id="login-password">
  <button onclick="login()">登录</button>
  <p>还没有账户？ <a class="toggle-link" href="register">注册</a></p>
  <p><span class="toggle-link" onclick="toggleForm()">忘记密码？</span></p>
</div>

<div class="container" id="forgot-password-container" style="display: none;">
  <h2>忘记密码</h2>
  <input type="text" placeholder="请输入您的用户名" id="forgot-username">
  <input type="text" placeholder="手机号" id="forgot-phone">
  <input type="email" placeholder="邮箱" id="forgot-email">
  <input type="text" placeholder="密码提示问题" id="forgot-password-question">
  <input type="text" placeholder="密码提示答案" id="forgot-password-answer">
  <button onclick="resetPassword()">重置密码</button>
  <p><span class="toggle-link" onclick="toggleForm()">返回登录</span></p>
</div>

<script>
  function toggleForm() {
    const loginContainer = document.getElementById('login-container');
    const forgotPasswordContainer = document.getElementById('forgot-password-container');
    if (loginContainer.style.display === 'none') {
      loginContainer.style.display = 'block';
      forgotPasswordContainer.style.display = 'none';
    } else {
      loginContainer.style.display = 'none';
      forgotPasswordContainer.style.display = 'block';
    }
  }

  function login() {
    const account = document.getElementById('login-account').value;
    const password = document.getElementById('login-password').value;

    fetch('/users/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ account: account, password: password }),
    })
            .then(response => {
              if (response.ok) {
                return response.json();
              } else {
                throw new Error('登录失败');
              }
            })
            .then(data => {
              if (data.role === 1) {
                alert('登录成功');
                // 跳转到用户主页
                window.location.href = 'index1?id=' + data.id;
              } else {
                alert('无权限登录');
              }
            })
            .catch(error => {
              alert('登录失败：' + error.message);
            });
  }

  function resetPassword() {
    const account = document.getElementById('forgot-username').value;
    const phone = document.getElementById('forgot-phone').value;
    const email = document.getElementById('forgot-email').value;
    const passwordQuestion = document.getElementById('forgot-password-question').value;
    const passwordAnswer = document.getElementById('forgot-password-answer').value;

    fetch('/users/forgot-password', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        account: account,
        phone: phone,
        email: email,
        question: passwordQuestion,
        answer: passwordAnswer,
      }),
    })
            .then(response => {
              // 检查响应是否为JSON
              const contentType = response.headers.get('Content-Type');
              if (contentType && contentType.includes('application/json')) {
                return response.json();
              } else {
                throw new Error('服务器未返回JSON格式的数据');
              }
            })
            .then(data => {
              alert('验证成功');
              window.location.href = 'forget-password';
            })
            .catch(error => {
              alert('重置密码失败：' + error.message);
            });
  }
</script>
</body>
</html>
